import { useEffect } from 'react';
import * as echarts from 'echarts';

type Props = {
    id: string;
    data: { name: string; value: number }[];
    itemStyle?: Charts.ItemStyle;
    areaStyle?: Charts.AreaStyle;
    title?: string;
    titleConfig?: Charts.TitleConfig;
    grid?: Charts.grid;
    horizontal?: boolean;
    series?: Charts.Serie[];
    tooltip?: Charts.ToolTip;
    label?: Charts.Label;
    labelLine?: Charts.LabelLine;
    radius?: string[];
    center?: string[];
    colorList?: string[];
    legend?: Charts.Legend;
};

const DEFAULT_COLOR_LIST = [
    '#68C73A',
    '#FF7777',
    '#2389FF',
    '#38CCCC',
    '#F08E57',
    '#D786FF',
    '#7E6AFF',
    '#FF1C92',
    '#468E89',
    '#FFC310',
    '#56a131',
    '#b54f4f',
    '#1a69c4',
    '#2a9f9f',
    '#c77546',
    '#ac6acd',
    '#5c4cc2',
    '#d31477',
    '#346c68',
    '#d0a010',
];
export default (props: Props) => {
    const {
        id,
        data,
        radius,
        center,
        itemStyle,
        areaStyle,
        title,
        titleConfig,
        grid,
        series,
        tooltip,
        colorList,
        label,
        labelLine,
        legend,
    } = props;

    useEffect(() => {
        const chartDom = document.getElementById(id);
        const chart = echarts.init(chartDom);
        const option = {
            title: titleConfig
                ? titleConfig
                : title
                  ? {
                        show: true,
                        text: title,
                        top: 'center',
                        left: 'center',
                        textStyle: {
                            color: '#333',
                            fontSize: 12,
                        },
                    }
                  : undefined,
            tooltip: tooltip || { show: false },
            legend: legend || {
                bottom: 20,
                left: 'center',
            },
            grid: grid || {
                left: '5%',
                right: '5%',
                top: '5',
                bottom: '5%',
                containLabel: true,
            },
            series: series || [
                {
                    data: data,
                    type: 'pie',
                    radius: radius || ['40%', '70%'],
                    center: center || ['50%', '50%'],
                    avoidLabelOverlap: true,
                    label: label || {
                        show: true,
                        position: 'outside',
                    },
                    labelLine,
                    itemStyle: itemStyle || {
                        color: (params: any) => {
                            return (colorList || DEFAULT_COLOR_LIST)[params.dataIndex];
                        },
                    },
                    areaStyle: areaStyle || undefined,
                },
            ],
        };
        chart.setOption(option);

        const resizeHandler = () => {
            chart?.resize();
        };
        window.addEventListener('resize', resizeHandler);
        return () => {
            window.removeEventListener('resize', resizeHandler);
        };
    }, [JSON.stringify(props)]);

    return <div id={id} style={{ width: '100%', height: '100%' }} />;
};
